<template>
    <main-wrap @eleLoadOver="lisenScroll" :type="1">
        <div class="topBox" id="topwrap">
            <img-title/>
            <Auction v-if="detailType==2"/>
            <Author/>
            <Story v-if="detail.creatStory"/>
        </div>
        
        
        <teleport v-if="fixedFlag" to="body">
        <div class="dtFixedFlag" :style="{'padding-top':statusBarHeight?(statusBarHeight +'px'):0}">
            <my-tab v-model="active" :lists='[{title:"详情",name:0},{title:"参数",name:1},{title:"退货",name:2}]'/>
        </div>
        </teleport>
        <div v-else class="dtTabBox">
            <my-tab v-model="active" :lists='[{title:"详情",name:0},{title:"参数",name:1},{title:"退货",name:2}]'/>
        </div>
        
        <div id="zwf" v-show="fixedFlag" title="占位div"></div>

        <div class="tabContent">
            <Detail v-if="active==0"/>
            <Params v-else-if="active==1"/>
            <return-goods v-else-if="active==2"/>
        </div>


        <template v-slot:footer v-if="detailType==1">
            <div class="bottomBox">
                <div class="price" v-if="detail.internalPrice">¥<b>{{detail.internalPrice.decimalTwoString}}</b></div>
                <router-link class="buyBtn" :to="`/order/${detail.goodsId}`">立即付款</router-link>
            </div>
        </template>
    </main-wrap>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted,computed } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import mainWrap from '@/components/mainWrap.vue'
import imgTitle from './components/imgTitle.vue'
import Author from './components/author.vue'
import Story from './components/story.vue'
import Detail from './components/detail.vue'
import Params from './components/params.vue'
import returnGoods from './components/returnGoods.vue'
import Auction from './components/auction.vue'
import myTab from '@/components/myTab.vue'

export default {
    components:{
       mainWrap,
       imgTitle,
       Author,
       Story,
       Detail,
       Params,
       returnGoods,
       Auction,
       myTab
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            fixedFlag:false,
            active: 0,
            detail:computed(()=>store.state.arApi.detail),
            detailType:computed(()=>store.state.arApi.detailType), // 1为商品详情，2为拍卖详情
            statusBarHeight:computed(()=>store.state.arApi.statusBarHeight),
        })

        onMounted(()=>{
            const goodsId = route.params.id
            const type = route.query.type || 1
            store.commit('arApi/set_detailType',type)
            if(state.detailType == 2){  // 拍卖详情
                store.dispatch('arApi/get_auction_goods_detail',{goodsId})
            }else{ // 商品详情
                store.dispatch('arApi/get_goods_detail',{goodsId})
            }  
        })

        const lisenScroll =obj=>{
            obj.ele.onscroll = ()=>{
                const topEle = document.getElementById("topwrap")
                if(obj.ele.scrollTop>=topEle.offsetHeight){
                    state.fixedFlag = true
                    //document.querySelector('.dtTabBox').style['-webkit-overflow-scroll'] = 'touch'
                    document.querySelector('#zwf').style.height = document.querySelector('.dtTabBox').offsetHeight+'px'
                }else{
                    state.fixedFlag = false
                    //document.querySelector('.dtTabBox').style['-webkit-overflow-scroll'] = 'auto'
                    document.querySelector('#zwf').style.height = 0
                }
            }
        }

        return{
            ...toRefs(state),
            lisenScroll
        }
    }
}
</script>

<style lang="scss" scoped>
    .dtTabBox{
        width: 100%;
        font-weight: bold;
        padding: 0 40px;
        background: #022424;
        position: relative;
        z-index: 100;
    }
    .bottomBox{
        display: flex;
        height: 100px;
        width: 100%;
        background: rgba(14, 97, 97, 0.8);
        .price{
            flex: 1;
            padding: 0 30px;
            line-height: 100px;
            font-weight: 500;
            font-size: 40px; 
            b{
                padding: 0 0 0 7px;
                font-weight: 500;
            }
        }
        .buyBtn{
            width: 250px;
            background: var(--baseColor);
            font-size: 36px;
            line-height: 100px;
            text-align: center;
            color: #fff;
            font-weight: 500;
            &:active{
                background: #eea454;
            }
        }
    }
    .tabContent{
        padding: 40px;
    }
</style>
<style>
    .dtFixedFlag{
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            z-index: 1000;
            background: #022424;
            width: 100%;
            font-weight: bold;
            padding: 0 40px;
            transform: translateZ(0);
            -webkit-transform: translateZ(0);
        }
</style>
